<template>
  <div class="book-rank">
    <div class="show-rank">
      <c-table-show :title="rankTitles[rankType]" :splitColor="true" :showList="showRanked" :columnShow="['排名','类别','书名','最新章节','作者','章节数']"/>
    </div>
    <div class="change-rank">
      <p class="changer-title">排行榜</p>
      <p class="changer-line" v-for="(item, i) in rankTitles" :key="i">
        <span @click="listRank(i)" :class="['changer-line-go', rankType==i?'changer-line-active':'']">{{item}}</span>
      </p>
    </div>
  </div>
</template>

<script>
import cTableShow from '../../components/index/home/TableShow.vue'

export default {
  components:{
    cTableShow
  },
  data(){
    return {
      rankType:null,
      rankTitles:['点击榜','新书榜','更新榜','评论榜'],
      showRanked:[],
    }
  },
  created(){
    this.listRank(this.$route.query.rankType==null?0:this.$route.query.rankType);
  },
  methods:{
    listRank(type){
      if(this.rankType == type){
        return;
      }

      this.rankType = type;
      this.showRanked = [];
      let param = {
        type:this.rankType,
        limit:30
      }
      this.$http.post('/book/listRank', param, res => {
        this.showRanked = res;
      });
    }
  }
}
</script>

<style lang='scss' scoped>
.book-rank {
  padding: 20px 0;
  width: 80%;
  margin: 0 auto;
  .show-rank {
    background-color: #fff;
    border-radius: 5px;
    display: inline-block;
    vertical-align: top;
    width: 70%;
    padding: 18px;
    margin-right: 20px;
  }

  .change-rank {
    background-color: #fff;
    border-radius: 5px;
    display: inline-block;
    vertical-align: top;
    padding: 18px;
    //0.8*(1-0.7) 18+20
    width: calc(24% - 38px);
    .changer-title{
      font-size: 20px;
      font-weight: bold;
    }
    .changer-line {
      border: 1px dotted #EEE;
      border-width: 0 0 1px 0;
      line-height: 50px;
      margin: 0;
      font-size: 16px;
      .changer-line-go {
        cursor: pointer;
      }
      .changer-line-active{
        color: $base-color;
      }
    }
  }
}
</style>